<template>
  <aside class="epic-attribute-view" :key="checkedNode?.id">
    <div v-for="item in componentAttributes" :key="item.field">
      <div v-show="isShow(item)" class="attr-item" :class="item.layout">
        <div
          class="attr-label"
          :title="item.label + (item.describe ? '(' + item.describe + ')' : '')"
          :style="item.labelStyle ? item.labelStyle : ''"
          v-if="item.label"
        >
          {{ item.label }}
        </div>
        <div class="attr-input">
          <ENode
            :record="{
              ...item,
              componentProps: {
                ...item.componentProps,
                ...(item.field === 'componentProps.defaultValue'
                  ? checkedNode?.componentProps
                  : {}),
                input: false,
                field: undefined,
                hidden: false,
              },
              show: true,
              noFormItem: true,
            }"
            :model-value="getAttributeValue(item.field!, item.editData ?? checkedNode!)"
            @update:model-value="
              handleSetValue($event, item.field!, item, item.editData ?? checkedNode!)
            "
          />
        </div>
      </div>
    </div>
  </aside>
</template>
<script lang="ts" setup>
  import ENode from '../../../../node/index';
  import { Designer, NodeItem, PageSchema } from '../../../../../types/epic-designer';
  import {
    pluginManager,
    revoke,
    getAttributeValue,
    setAttributeValue,
  } from '/@/views/formDesigner/utils';
  import { inject, computed, ref, watch, nextTick } from 'vue';
  import { deepClone } from '/@/views/formDesigner/utils';
  const designer = inject('designer') as Designer;
  const pageSchema = inject('pageSchema') as PageSchema;

  const componentConfings = pluginManager.getComponentConfings();
  const checkedNode = computed(() => {
    console.log('designer.state.checkedNode', designer.state.checkedNode);
    return designer.state.checkedNode;
  });

  function isShow(item: NodeItem) {
    // show属性为boolean类型则直接返回
    if (typeof item.show === 'boolean') {
      return item.show;
    }

    // show属性为function类型则执行
    if (typeof item.show === 'function') {
      return item.show?.({ values: checkedNode.value! });
    }

    return true;
  }

  const componentAttributes = ref<NodeItem[]>([]);
  watch(
    () => designer.state.checkedNode?.id,
    () => {
      const type = designer.state.checkedNode?.type;
      if (!type) {
        return [];
      }

      const attribute = deepClone(componentConfings[type]?.config.attribute ?? []);

      if (designer.state.checkedNode && designer.state.checkedNode.name) {
        console.log('designer.state.checkedNode.name', designer.state.checkedNode.name);
        componentAttributes.value = attribute.map((item) => {
          if (item.field === 'name') {
            if (designer.state.checkedNode?.componentProps?.readonlyName) {
              item.componentProps.readonly = true;
            } else {
              if (item.componentProps) {
                item.componentProps.readonly = true;
              } else {
                item.componentProps = {
                  readonly: true,
                };
              }
            }
          }
          return {
            ...item,
          };
        });
      } else {
        componentAttributes.value = attribute.map((item) => {
          if (item.field === 'name') {
            if (designer.state.checkedNode?.componentProps?.readonlyName) {
              item.componentProps.readonly = false;
            } else {
              if (item.componentProps) {
                item.componentProps.readonly = false;
              } else {
                item.componentProps = {
                  readonly: false,
                };
              }
            }
          }
          return {
            ...item,
          };
        });
      }

      console.log('componentAttributes.value', componentAttributes.value);
      console.log('designer.state.checkedNode__', designer.state.checkedNode);
      // [
      // {
      //   label: '组件ID',
      //   type: 'input',
      //   field: 'id',
      //   componentProps: {
      //     disabled: true,
      //   },
      // },
      //   ...attribute,
      // ];
      // if (type === 'page') {
      //   componentAttributes.value.push(
      //     ...[
      //       {
      //         label: '画布宽度',
      //         type: 'EInputSize',
      //         field: 'canvas.width',
      //         editData: pageSchema,
      //       },
      //       {
      //         label: '画布高度',
      //         type: 'EInputSize',
      //         field: 'canvas.height',
      //         editData: pageSchema,
      //       },
      //     ],
      //   );
      // }
    },
    {
      immediate: true,
    },
  );

  /**
   * 设置属性值
   */
  function handleSetValue(value: any, field: string, item: NodeItem, editData = checkedNode.value) {
    console.log('handleSetValue', { value, values: editData!, componentAttributes, item });
    if (typeof item.onChange === 'function') {
      item.onChange({ value, values: editData!, componentAttributes });
    }
    // 判断是否同步修改属性值
    if (item.changeSync) {
      setAttributeValue(value, field, editData!);
    } else {
      nextTick(() => {
        setAttributeValue(value, field, editData!);
      });
    }
    // designer.state.checkedNode = editData;
    // componentAttributes.value = [...componentAttributes.value];
    // 将修改过的组件属性推入撤销操作的栈中
    revoke.push(pageSchema.schemas, '编辑组件属性');
  }
</script>
